<template>
  <div class="hello">
<!-- 
 <table align="center">
   <tr>
     <td>
       <label for="">username:</label>
       <input v-model="username" type="test" id="username"/>
     </td>
   </tr>


   <tr>
           <td>
       <label for="">room</label>
       <input type="test" v-model="room" id="room"/>
       <button v-on:click="clickconnect" :disabled="isconnect">connect</button>
     </td>
   </tr>


   <tr>
      <td>
       <label for="">content</label>
        <textarea disabled id="output" cols="30" rows="10" :value="content"></textarea>
     </td>
   </tr>

   <tr>
     <label for="">input</label>
     <textarea v-model="msginput" cols="30" rows="5"></textarea>
   </tr>
   <tr>
     <button id='send' v-on:click="sendmsg">send</button>
   </tr>
 </table> -->



<el-form ref="form" class="chartroom">
<el-row>
   <el-col :span="1">
   <div class="grid-content bg-purple"> </div>
 </el-col>
 <el-col :span="4">

   
  <el-form-item class="roominfo" label="">
    <el-input v-model="username" placeholder="用户名">用户名</el-input>
    <el-input v-model="room" placeholder="房间号">房间号</el-input>
    <el-button type="primary"  :disabled="noconnect" v-on:click="clickconnect">连接</el-button>
  </el-form-item>



 </el-col>
 <el-col :span="1">
   <div class="grid-content bg-purple"> </div>
 </el-col>

 <el-col :span="12">
  <el-form-item label="聊天内容">
    <el-input style="color:black" type="textarea" :disabled="true"  :rows="24" v-model="content"></el-input>
  </el-form-item>

  <el-form-item label="输入信息">
    <el-input v-model="msginput"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary"  v-on:click="sendmsg" >发送</el-button>
    <el-button>取消</el-button>
  </el-form-item>
 </el-col>


</el-row>
</el-form>










  </div>
</template>
<script>
import * as io from 'socket.io-client'

export default {
  name: 'chat',
  data() {
    return {
      msg: 'Welcome to Your Vue.js Appaaa11',
      socket:Object,
      isconnect:'disabled',
      noconnect:null,
      content:"",
      msginput:"",
      room:"",
      username:""
    }
  },
  methods:{
    clickconnect:function(){     

      
      this.socket=io.connect()
      
      var room=this.room
    console.log("room id is :" +this.room)
      this.socket.on('joined',(room,id)=>{
        this.noconnect="disabled"
        this.isconnect=null

      })

      this.socket.on('leaved',(room,id)=>{
        this.isconnect=false
      })


      this.socket.on('message',(data)=>{
        
        this.content=this.content+data.user+":"+data.data+'\r'
        // console.log(room)
        // console.log(data)
        // console.log(id)
        // console.log(this.content)
      })


    this.socket.emit('join',room,this.username)

      // alert(123)
    },
    sendmsg:function(){
      var room=this.room
      // alert(this.msginput)
      this.socket.emit('message',room,this.msginput)
      this.msginput=''
    }
  }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
h1,
h2 {
  font-weight: normal;
}
.chartroom {
  margin-top: 25px !important;
  
}
.roominfo{
  margin-top: 70%
}
ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

  .el-col {
    border-radius: 4px;
  }

  /* .bg-purple {
    background: #d3dce6;
  } */

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
.el-textarea__inner{
  color: #000 !important;
}

</style>
